<template>
  <div class="record">
    <div class="top">
      <div>
        <el-select v-model="value" placeholder="多头负债">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div>  
      <div class="block">
            查询时间：
          <el-date-picker
            v-model="value2"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </div>
      </div>
       <div class="father">
            <span><el-input v-model="input" placeholder="请输入客户姓名或身份证号" class="ipt"></el-input></span>
            <span><el-row><el-button type="primary" plain class="btn">搜索</el-button></el-row></span>
        </div>
    </div>
    <br />
    <!-- 表单 -->
    <el-table :data="tableData" border style="width: 100%">
       <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
       <el-table-column prop="idcard" label="身份证" width="200"></el-table-column>
       <el-table-column prop="money" label="查询项目" width="200"></el-table-column>
       <el-table-column fixed prop="date" label="查询时间" width="150"> </el-table-column>
       <el-table-column prop="phone" label="查询状态" width="300"> </el-table-column>
       <el-table-column label="查询详情" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看报告</el-button>
        </template>
      </el-table-column>
    </el-table>      
    <!-- 页数 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="500"
      style="fixed='right'"
    >
    </el-pagination>
  </div>
</template>
<script>
export default {
  methods: {
    handleClick(row) {
      this.$router.push('/home/inquire/report')
    },
  },

  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "社保",
        },
        {
          value: "选项2",
          label: "京东",
        },
        {
          value: "选项3",
          label: "支付宝",
        },
        {
          value: "选项4",
          label: "淘宝",
        },
        {
          value: "选项5",
          label: "网银流水",
        },
        {
          value: "选项6",
          label: "多头负债",
        },
        {
          value: "选项7",
          label: "公积金社保",
        },
      ],
      value: "",
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          idcard: "148598159565418971",
          money: "支付宝",
          phone: "验证中",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          idcard: "148598159565418971",
          money: "社保",
          phone: "查询失败",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          idcard: "148598159565418971",
          money: "公积金",
          phone: "查询中",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          idcard: "148598159565418971",
          money: "多头负债",
          phone: "查询成功",
        },
      ],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value1: "",
      value2: "",
      input: ''
    };
  },
};
</script>
<style lang="scss" scoped>
.top {
  background: #d3dce6;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-family: 宋体;
  line-height: 40px;
  height: 40px;
  width: 100%;
  
}
.el-table {
  background: #d3dce6;
}
.ipt{
  width: 200px;
  height: 20px;
  position: absolute;
  right: 60px;
}
.father{
    position: relative;
    width: 180px;
}
.btn{
    position: absolute;
    top: 0px;
    width: 60px;
    height: 40px;
    right: 0;

}
</style>